<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
    <a href="#" id="loginLink">登录</a>
    <a href="#" id="regeLink">注册</a>
</header>

<div class="layer-mask" id="layer-mask"></div>
<div class="layer-pop" id="layer-pop">
    <div class="layer-close" id="layer-close">x</div>
    <div class="layer-content" id="layer-content"></div>
</div>
<div class="loginHtml" id="loginHtml" style="display: none;">
    <p style="text-align: center;color: #f00;">这是登录窗体内容</p>
</div>
<div class="regeHtml" id="regeHtml" style="display: none;">
    <p style="text-align: center;color: #f00;">这是注册窗体内容</p>
</div>
</body>
<style>
    /*头部样式*/
    header {
        width: 1200px;
        height: 80px;
        line-height: 80px;
        text-align: right;
        margin: 0 20px 0 25px;
        overflow: hidden;
        border: 1px #333 solid;
    }

    header a {
        margin-left: 20px;
        margin-right: 20px;
    }

    /*弹出层遮罩*/
    .layer-mask {
        display: none;
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
    }

    /*弹出层窗体*/
    .layer-pop {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 400px;
        height: 300px;
        background: #fff;
    }

    /*关闭按钮*/
    .layer-close {
        float: right;
        width: 24px;
        height: 24px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        background: #eee;
        border: 3px solid #fff;
        margin-right: -12px;
        margin-top: -12px;
    }

    .layer-close:hover {
        cursor: pointer;
        background: #ccc;
        color: #fff;
    }

</style>
</html>
<script>
    $(document).ready(function($){
        // 登陆链接事件
        $("#loginLink").click(function(){
            //获取登陆窗体代码
            var loginHtml = $("#loginHtml").html();
            showLayer(loginHtml,500,300);
        });

        // 注册链接事件
        $("#regeLink").click(function(){
            //获取注册窗体代码
            var regeHtml = $("#regeHtml").html();
            showLayer(regeHtml,500,300);
        });

        // 封装显示弹出层函数
        function showLayer(html,width,height,closeCallback){
            $("#layer-mask").show();
            $("#layer-pop").show();
            //动态设置弹出层宽度高度
            $("#layer-pop").css({
                width: width,
                height: height
            });
            //填充弹出层窗体内容
            $("#layer-content").html(html);
            //绑定事件，调用hideLayer
            $("#layer-close").click(function(){
                hideLayer();
            });
        };

        // 封装隐藏弹出层函数
        function hideLayer(){
            $("#layer-mask").hide();
            $("#layer-pop").hide();
        };
    });
</script>